<template>
  <view class="my-container">
    <!-- 使用公共自定义导航栏 -->
    <custom-navbar title="我的" />
    
    <!-- 主内容区域 -->
    <view class="content-wrapper">
      <!-- 用户信息 -->
      <view class="user-info">
        <view class="avatar">
          <text class="avatar-text">头像</text>
        </view>
        <view class="user-detail">
          <text class="username">用户昵称</text>
          <text class="user-id">账号: user123456</text>
        </view>
      </view>
      
      <!-- 菜单列表 -->
      <view class="menu-list">
        <view class="menu-group">
          <view class="menu-item">
            <text class="menu-icon">📋</text>
            <text class="menu-text">我的日程</text>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item">
            <text class="menu-icon">👥</text>
            <text class="menu-text">我的团队</text>
            <text class="menu-arrow">›</text>
          </view>
        </view>
        
        <view class="menu-group">
          <view class="menu-item">
            <text class="menu-icon">⚙️</text>
            <text class="menu-text">设置</text>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item">
            <text class="menu-icon">❓</text>
            <text class="menu-text">帮助与反馈</text>
            <text class="menu-arrow">›</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部导航栏 -->
    <tab-bar />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

onMounted(() => {
  console.log('我的页面加载');
});
</script>

<style lang="scss" scoped>
.my-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  
  // 主内容区域
  .content-wrapper {
    margin-top: var(--status-bar-height);
    padding-top: 90rpx; // 导航栏高度
    display: flex;
    flex-direction: column;
    
    // 用户信息
    .user-info {
      display: flex;
      align-items: center;
      padding: 40rpx;
      background-color: #ffffff;
      margin-bottom: 20rpx;
      
      .avatar {
        width: 120rpx;
        height: 120rpx;
        background-color: #333;
        border-radius: 50%;
        margin-right: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .avatar-text {
          color: #fff;
          font-size: 28rpx;
        }
      }
      
      .user-detail {
        flex: 1;
        
        .username {
          font-size: 36rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
        }
        
        .user-id {
          font-size: 28rpx;
          color: #999;
        }
      }
    }
    
    // 菜单列表
    .menu-list {
      display: flex;
      flex-direction: column;
      
      .menu-group {
        background-color: #ffffff;
        margin-bottom: 20rpx;
        
        .menu-item {
          display: flex;
          align-items: center;
          padding: 30rpx 40rpx;
          position: relative;
          
          &:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 40rpx;
            right: 0;
            bottom: 0;
            height: 1rpx;
            background-color: #f0f0f0;
          }
          
          .menu-icon {
            font-size: 40rpx;
            margin-right: 20rpx;
          }
          
          .menu-text {
            flex: 1;
            font-size: 32rpx;
          }
          
          .menu-arrow {
            font-size: 40rpx;
            color: #ccc;
          }
        }
      }
    }
  }
}
</style> 